<template>
    <div class="content bg-white">
        <div class="font-size-16-pk font-bold text-center mb-15">
            使用福屏券越多，中奖率越大
        </div>
        <div class="d-flex-pk align-items-center justify-content-center mb-15">
            <div>本次共使用张数：</div>
            <div class="stepper">
                <button
                    type="button"
                    :class="['btn minus',minusDisable?'minus-disable':'']"
                    @click="minus"
                />
                <input
                    class="input"
                    type="text"
                    v-model="result"
                    @input="checkNumber"
                    oninput="value=value.replace(/[^\d]/g,'')"
                />
                <button
                    type="button"
                    :class="['btn plus',plusDisable?'plus-disable':'']"
                    @click="plus"
                />
            </div>
        </div>
        <div class="text-center mb-15 notice">
            <div>
                <span class="text-gray-b3-pk">我的福屏卷</span>
                <span class="text-warning font-bold font-size-18-pk mx-5">{{myFpCouponNum}}</span>
                <span class="text-gray-b3-pk">张</span>
            </div>
            <div>
                <span class="text-gray-b3-pk">本次最多可用</span>
                <span class="text-warning font-bold font-size-18-pk mx-5">{{joinCouponNum}}</span>
                <span class="text-gray-b3-pk">张</span>
            </div>
        </div>
        <div class="btn rounded-pill btn-join" @click="submit">
            <div class="text">立即参与</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "JoinDialog",
        props:{
            //限制购买数量
            limitBuy:{
                type:Number || String,
                default:1
            },
            //开奖的卷数
            awardCouponNum:{
                type:Number || String,
                default:1
            },
            //现在已投入的卷数
            nowCouponNum:{
                type:Number || String,
                default:0
            },
            //我拥有的福屏卷数
            myFpCouponNum:{
                type:Number || String,
                default:0
            },
            //默认值
            defaultValue:{
                type:Number,
                default:0
            },
            integer:{
                type:Boolean,
                default:true
            },

        },
        data(){
            return {
                result:1,
                fpColumn:1,
                minusDisable:false,
                plusDisable:false
            }
        },
        computed:{
            joinCouponNum(){
                let last = parseInt(this.awardCouponNum) - parseInt(this.nowCouponNum);
                if(last > this.limitBuy){
                    if(this.myFpCouponNum > this.limitBuy){
                        return this.limitBuy;
                    }else{
                        return this.myFpCouponNum;
                    }
                }else{
                    if(this.myFpCouponNum > last){
                        return last
                    }else{
                        return this.myFpCouponNum
                    }
                }
            }
        },
        methods:{
            minus(){
                let temp = parseInt(this.result - 1);
                if(temp <= 1 ){
                    this.result = 1;
                    this.minusDisable = true;
                    this.plusDisable = false;
                }else{
                    this.result = temp;
                }
            },
            plus(){
                if(isNaN(this.result)){
                    this.result = 1;
                }else{
                    let temp = parseInt(this.result) + 1;
                    if(temp >= this.joinCouponNum){
                        this.result = this.joinCouponNum;
                        this.plusDisable = true;

                    }else{
                        this.result = temp;
                    }
                    this.minusDisable = false;
                }
            },
            checkNumber(){
                if(this.result > this.joinCouponNum){
                    this.result = this.joinCouponNum;
                    this.plusDisable = true;
                    this.minusDisable = false;

                }else if(this.result <= 1){
                    this.result = 1
                    this.plusDisable = false;
                    this.minusDisable = true;
                }
            },
            submit(){
                this.$emit('click-join',this.result)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../treasure";
    .mb-15{
        margin-bottom: 15px;
    }
    .mx-5{
        margin:0 5px;
    }
    .content{
        width:80vw;
        padding:15px;
        
        .title{
            margin-bottom: 15px;
        }
    }
    .stepper{
        color:$orange;
        border: 1px solid #ff5300;
        border-radius: 4px;
        .input{
            box-sizing: border-box;
            width: 55px;
            height: 28px;
            margin: 0 2px;
            padding: 0;
            color: #323233;
            font-size: 14px;
            text-align: center;
            vertical-align: middle;
            background-color: #f2f3f5;
            border: 0;
            border-width: 1px 0;
            border-radius: 0;
            -webkit-appearance: none;
        }
        .btn{
            border:none;
            background: none;
            outline: none;
            font-weight:bold;

            height: 28px;
            padding:0;
        }
        .plus,.minus{
            position: relative;
            box-sizing: border-box;
            width: 28px;
            height: 28px;
            margin: 0;
            padding: 4px;
            color: $white;
            vertical-align: middle;
            background-color: $orange;
            border: 0;
        }
        .plus{
            border-radius: 0 4px 4px 0;
        }
        .minus{
            border-radius: 4px 0 0 4px;
        }
        .plus:after, .minus:after{
            position:         absolute;
            top:              0;
            right:            0;
            bottom:           0;
            left:             0;
            margin:           auto;
            background-color: $white;
            content:          '';
            width: 13px;
            height: 2px;
        }
        .plus:before, minus:before{
            width: 2px;
            height: 13px;
            position:         absolute;
            top:              0;
            right:            0;
            bottom:           0;
            left:             0;
            margin:           auto;
            background-color: $white;
            content:          '';
        }
        .minus-disable,.plus-disable{
            background: $gray-400;
        }
    }
    .notice{

    }
    .btn-join{
        display: block;
        height:40px;
        width:250px;
        background: linear-gradient(0,#FC802A,#FF5300);
        border-radius: 50rem;
        margin: 0 auto;
        .text{
            vertical-align: bottom;
            height: 39px;
            margin: 0 auto;
            line-height: 39px;
            color: white;
            letter-spacing: 2px;
        }
    }

</style>
